<?php

?>
<div class="rbac-select" style="border: 3px solid ghostwhite;width: 45%;padding: 20px;float: left;background-color: white">
    <table class="table">
        <th>角色名称</th>
        <th>角色描述</th>
        <th>操作</th>
    <?php foreach($roles as $k=>$v) {?>
        <tr>
        <td><span class="glyphicon glyphicon-home"></span>  <?= $v->name?></td>
        <td><?= $v->description?></td>
            <td><button class="btn btn-success" onclick="javascript:getUser('<?=$v->name?>')">查看拥有该角色的用户</button></td>
        </tr>
    <?php }?>

    </table>
</div>
<div class="rbac-select" style="border: 3px solid ghostwhite;width: 50%;padding: 20px;float: right">
    <h4>创建角色</h4>
    <div style="margin:20px;">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">角色名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name"
                           placeholder="角色名称">
                </div>
            </div>
            <div class="form-group">
                <label for="description" class="col-sm-2 control-label">角色描述</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="description"
                           placeholder="角色描述">
                </div>
            </div>

        </form>
        <div class="col-sm-offset-2 col-sm-10">
            <a id="addMenu" onclick="javascript:addRole()" class="btn btn-default">生成角色</a>
        </div>
    </div>
</div>

<input type="hidden" name="_csrf" id='csrf' value="<?= Yii::$app->request->csrfToken ?>">

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">查看用户</div>
            <div class="modal-body">
                <!--                    <table style="border: 3px solid ghostwhite;background-color: white" class="table"><tr><td><input type="checkbox" checked></td><td>仓库管理员</td></tr><tr><td><input type="checkbox" checked></td><td>仓库管理员</td></tr><tr><td><input type="checkbox" checked></td><td>仓库管理员</td></tr></table>-->
            </div>
<!--            <div class="modal-footer"><button onclick="javascript:saveRole()" class="btn btn-success">提交</button></div>-->
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    function addRole()
    {
        var obj = new Object();
        obj.description = $('#description').val();
        obj.name = $('#name').val();
        var csrf  = $('#csrf').val();

        $.ajax(
            {
                url: '?r=rbac/role/create',
                type: 'post',
                async: false,
                data: {_csrf: csrf, data: obj},

                success: function (data) {
                    var re = eval('('+data+')');
                    if(re.code==200){

                    }
                }
            }
        )
    }

    function getUser(name)
    {
        var obj = new Object();
        obj.name = name;
        var csrf  = $('#csrf').val();

        $.ajax(
            {
                url: '?r=rbac/role/getuser',
                type: 'post',
                async: false,
                data: {_csrf: csrf, data: obj},

                success: function (data) {
                    var re = eval('('+data+')');
                    if(re.code==200){
                        var html = '<table style="border: 3px solid ghostwhite;background-color: white" class="table">';
                        var len = re.data.length;console.log(re)
                        for(var i = 0; i<len;i++) {
                            if(re.data[i].checked==true){
                                html += '<tr><td><input name="rolechk" type="checkbox" value="'+re.data[i].username+'" checked></td><td>'+re.data[i].username+'</td></tr>';
                            } else{
                                html += '<tr><td><input name="rolechk" type="checkbox" value="'+re.data[i].username+'" ></td><td>'+re.data[i].username+'</td></tr>';
                            }
                        }
                        html += '</table>';
                        $('.modal-body').html(html);
                        $('#myModal').modal({
                            keyboard: true
                        })
                    }
                }
            }
        )
    }
</script>